<template>
  <div class="mv-warp">
    <div class="mv-item-box" v-for="(item, idx) in mvCont" :key="idx">
      <div class="nav">
        <div class="left">
          <h3 class="text">{{ item.describe }}</h3>
          <h3><i :class="item.icon"></i></h3>
        </div>
        <div class="rig" v-if="item.sort == 10">
          <a
            href="javascript:;"
            v-for="(itm1, idx1) in item?.areaType"
            :key="idx1"
            :class="activeIdx == idx1 ? 'active' : ''"
            @click="activeFunc(itm1, idx1, 'mv')"
            >{{ itm1.describe }}</a
          >
        </div>
        <div class="rig" v-if="item.sort == 40">
          <a
            href="javascript:;"
            v-for="(itm2, idx2) in item?.areaRankingType"
            :key="idx2"
            :class="rankingActiveIdx == idx2 ? 'active' : ''"
            @click="activeFunc(itm2, idx2, 'rankingMv')"
            >{{ itm2.describe }}</a
          >
        </div>
      </div>
      <div class="conte-box">
        <div v-if="item.sort == 10" class="item-mv-box">
          <a
            href="javascript:;"
            class="min-box"
            v-for="(item, idx) in newMVList"
            :key="idx"
          >
            <div class="img-box">
              <img :src="item.cover" alt="" />
            </div>
            <div>
              <div>{{ item.name }}</div>
              <div>{{ item.artistName }}</div>
            </div>
          </a>
        </div>
        <div v-if="item.sort == 20"></div>
        <div v-if="item.sort == 30"></div>
        <div v-if="item.sort == 40"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewMVList } from '@/http/mvApi.ts'
import { mvCont } from './mvData'
export default {
  components: {},
  data() {
    return {
      newMVList: [],
      limit: 12,
      mvCont,
      activeIdx: 0, //新 mv
      rankingActiveIdx: 0, //排行mv
      mvArea: '内地',
      rankingMvArea: '内地',
    }
  },

  methods: {
    activeFunc(itm, idx, text) {
      // text === 'mv' ? (this.activeIdx = idx) : (this.rankingActiveIdx = idx)
      switch (text) {
        case 'mv':
          this.activeIdx = idx
          this.mvArea = itm.describe
          getNewMVList({
            limit: this.limit,
            area: this.mvArea,
          })
            .then((res) => {
              this.newMVList = Object.freeze(res)
              // console.log( this.newMVList, '有地区的mv')
            })
            .catch((err) => err)
          break
        case 'rankingMv':
          this.rankingActiveIdx = idx
          this.rankingMvArea = itm.describe
          break
      }
      // console.log(itm.describe, idx, 'itm,idx====')
    },
  },
  async mounted() {
    // 获取最新MV
    const mvArr = await getNewMVList({
      limit: this.limit,
      area: this.mvArea,
    })
    this.newMVList = Object.freeze(mvArr)
    // console.log(this.newMVList, ' 获取最新MV ===')
  },
  watch: {},
  computed: {},
}
</script>

<style scoped lang="less">
// ::v-deep .main-connt {
//   overflow: auto !important;
// }
.active {
  color: #d44444 !important;
  background-color: #e78b8b;

  border-radius: 5px;
}
.mv-warp {
  height: 100%;
  overflow: auto;
  padding: 0 15px;
  .mv-item-box {
    min-height: 300px;
    .nav {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      .left {
        display: flex;
        .text {
          margin-right: 5px;
        }
      }
      .rig {
        display: flex;
        justify-content: space-between;
        min-width: 300px;

        a {
          padding: 0 10px;
          text-decoration: none;
          color: #ccc;
        }
      }
    }
    .conte-box {
      .item-mv-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .min-box {
          display: inline-block;
          text-decoration: none;
          color: #ccc;
          padding: 10px 5px;
          .img-box {
            width: 280px;
            height: 150px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
